<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content = "EditPlus#">
    <meta name="Author" content = "Dan">
    <meta name="Keyword" content = "">
    <meta name="Description" content="">
    <title>UNSW virtural campous</title>
    <style>
         body,h1,ul{
            margin:0;
            padding:0;
         }
         .header{
            width:100%;
            height:800px;
            /*background-color:red;*/
         }
         .nav{
            width:100%;
            height:80px;
            background-color:black;
         }
         .nav_child{
            width:1000px;
            height:80px;
            margin:auto;
         }
         .banner{
            width:100%;
            height:760px;
            background-image:url("images/banner.png");
            background-position: center;
             position: relative;
             margin:auto;
             background-repeat:no-repeat;
             /*background-color:orange;*/
         }
         /*.banner:hover{*/
         /*   background-image:url("images/banner01.png");*/
         /*   background-position: center;*/
         /*}*/
         .logo{
            width:200px;
            height:80px;
            float:left;
         }
         .logo img{
            margin-top:5px;
         }
         .navbar{
            width:750px;
            height:80px;
            float:right;
         }
         .navbar a{
            color:white;
            line-height:80px;/* vertical center */
            margin-left:40px;
            text-decoration:none;/* remove under line*/
            font-size:15px;/* change size */
         }
         .navbar a:hover{
            color:orange;
            font-size:18px;
         }
         .main{
            width:100%;
            height:2000px;
            /*background-color:palevioletred;*/
         }

         .title{
             width:100%;
             height:175px;
             /*background-color:red;*/
             /*background-image:url("images/title.png");*/
             background-position: top center;
             position: relative;
             background-repeat:no-repeat;
         }
         .options{
             width:100%;
             height:2225px;
             /*background-color:greenyellow;*/
             background-image:url("images/Options.png");
             background-position: top center;
             position: relative;
             background-repeat:no-repeat;
         }

         .library:hover{
            transform:scale(1.05);/*放大同时旋转*/
            transition:1s;
         }

         .cafe_icon:hover{
            transform:scale(1.05);/*放大同时旋转*/
            transition:1s;
         }
        .tips_icon:hover{
            transform:scale(1.05);/*放大同时旋转*/
            transition:1s;
         }
    </style>
 </head>
 <body>

    <!--
    方法一 行内样式
    <div style ="width:100px;height:500px;background-color:red;"></div>
    -->
     <div class="header">
         <div class="nav">
             <div class="nav_child">
                 <div class = "logo">
                     <a href="https://www.unsw.edu.au/" target="_blank"><img src="images/logo.png"></a>
                 </div>
                 <div class = "navbar">
                     <a href="homepage.html" target="_blank">Homepage</a>
                     <a href="chat.html" target="_blank">Chat</a>
                     <a href="chat.html" target="_blank">Library</a>
                     <a href="tips.html" target="_blank">Study Tips</a>
                     <a href="http://my.unsw.edu.au" class="header">myUNSW</a>
                 </div>
             </div>
         </div>
         <div class="banner">
         </div>
     </div>
     <!--网站头部区域结束-->

     <!--网站主体的开始-->
     <div class="main">
            <div class = "map">
                <div class="title"></div>
                <div class="options">
<!--                    <h1>options</h1>-->
                    <div class="library">
<!--                        <h1>library</h1>-->
                            <a href="chat.html" target="_blank"><img src="images/Library_icon.png" style= "position:absolute;top:30px;left:200px; width:340px;height:340px" alt=""></a>
                    </div>
                    <div class="cafe">
<!--                        <h1>cafe</h1>-->
                            <div class = "cafe_icon">
                                <a href="chat.html" target="_blank"><img src="images/Cafe_icon.png" style= "position:absolute;top:380px;left:800px; width:340px;height:340px" alt=""></a>
                            </div>
                    </div>
                    <div class="tips">
<!--                        <h1>tips</h1>-->
                            <div class = "tips_icon">
                                <a href="tips.html" target="_blank"><img src="images/Tips_icon.png" style= "position:absolute;top:650px;left:200px; width:340px;height:340px" alt=""></a>
                            </div>
                    </div>
                </div>
            </div>
     </div>
     <!--网站主题的结束-->
 </body>
</html>
